<template>
  <div class="infinite-container">
    <div class="tips-warning center">
    已添加<span class="t5"> {{familys.length}} </span>人，还能添加<span class="t5"> {{6-familys.length}} </span>人
    </div>
    
    <div>
    <mu-flexbox  class="family-item bgwhite" v-for="(f, i) in familys" :key="f.uid" >
      <mu-flexbox-item>
        <div class="family-header">
          <span class="title">{{f.realname}}</span>
          <i :class="['iconfont', f.sexcode===1 ? 'icon-iconnan': 'icon-iconnv']"></i>
          <small class="t3">{{getFamilyRalation(f.relation)}}</small>
          <span class="fr t4" v-if="f.outpatientCardNo">已认证</span>
          <span class="fr" v-else>
            <router-link :to="'/setting/bind-visitcard?fid='+f.id+'&realname='+f.realname+'&outpatientCardNo='+(f.outpatientCardNo || '')" class="t5">立即认证</router-link>
          </span>
        </div>
        <mu-divider />
        <div @click="familyClick(f, i)">
         <p>{{getCardName(f.cardtype)}}： {{f.idcard}}</p>
         <p>手机号： {{f.mobile}}</p>
        </div>
      </mu-flexbox-item>
    </mu-flexbox>
  </div>


  <mu-flexbox :gutter="0" style="margin-top:4em;" v-show="familys.length < 6">
    <mu-flexbox-item grow="2"></mu-flexbox-item>
    <mu-flexbox-item grow="16">
      <mu-raised-button class="submit-btn" label=" + 添加成员" to="/setting/family/add" fullWidth primary></mu-raised-button>
    </mu-flexbox-item>
    <mu-flexbox-item grow="2"></mu-flexbox-item>
  </mu-flexbox>
  </div>
</template>

<script>
import {commonAjax} from '../../api/api'
import {CARD_TYPE, FAMILY_RALATION} from '../../api/const'

export default {
  data () {
    return {
      familys: [],
      FAMILY_RALATION: FAMILY_RALATION,
      CARD_TYPE: CARD_TYPE
    }
  },
  mounted () {
    this.$store.commit('UPDATE_TITLE', '我的家庭')
    this.getFamilys()
  },
  methods: {
    getCardName (cardType) {
      return CARD_TYPE.filter(v => v.value === cardType)[0].label
    },
    getFamilyRalation (relation) {
      if (relation === '0') {
        return '自己'
      }
      return FAMILY_RALATION.filter(v => v.value === relation)[0].label
    },
    getFamilys () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax('user/listFamily', {openid: localStorage.openId}).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.familys = res.data.data || []
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
      })
    },
    familyClick (f, i) {
      if (i === 0) {
        return false
      }
      localStorage.editFamily = JSON.stringify(f)
      this.$router.push('/setting/family/add?action=modify')
    }
  },
  destroyed () {
    this.$store.commit('UPDATE_TITLE')
  }
}
</script>

<style lang="less" scoped>
.family-item {
    padding: 1em;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.6em;
    .family-header {
      padding-bottom: .6em;
    }
    .title {
      font-size: 1.2em;
    }
    .icon-iconnan {
      color: #64A9F6;
      font-size: 1em;
    }
    .icon-iconnv {
      color: #F8868B;
      font-size: 1em;
    }
    p {
      margin: 0.6em 0 0 0;
      color: #666;
    }
  }
</style>
